<template>
  <div class="container">
    <navbar title="订单支付" theme="light"></navbar>
    <div class="order-info">
      <text class="order-title">订单状态</text>
      <text class="order-content">{{statusTitle}}</text>
    </div>
    <div class="order-info">
      <text class="order-title">订单内容</text>
      <text class="order-content">{{content}}</text>
    </div>
    <div class="order-info">
      <text class="order-title">订单金额</text>
      <div class="order-content">
        <div class="order-money">
          <text class="order-money-val">{{totalFee.toFixed(2)}}</text>
          <text class="order-money-y">元</text>
        </div>
      </div>
    </div>
    <text :class="['btn', 'btn-primary', 'btn-large', 'icon', 'btn-pay', !loaded && 'btn-disabled']" @click="goAliPay()">&#xe604; 支付宝支付</text>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }

  .order-info {
    background-color: #FFFFFF;
    padding: 20;
    margin-top: 10;
  }

  .order {
    &-title {
      font-size: 32;
      color: $color-muted;
      line-height: 32;
      @include border-left(5, solid, $brand-primary);
      padding-left: 20;
      margin-bottom: 10;
    }
    &-content {
      padding: 10 20;
      font-size: 32;
      color: $color;
    }
    &-money {
      flex-direction: row;
      align-items: flex-end;
      &-val {
        font-size: 60;
        color: $color-primary;
      }
      &-y {
        font-size: 32;
        color: $color;
      }
    }
  }

  .btn-pay {
    margin: 50 40;
    background-color: #2197D8;
  }

</style>
<script>

import {WxcDialog, WxcLoading} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')

let queryParser = require('./include/queryparser')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    WxcDialog,
    WxcLoading
  },
  data () {
    return {
      id: 0,
      content: '',
      totalFee: 0,
      statusTitle: '',
      canPay: false,
      loaded: false
    }
  },
  created () {
    let params = queryParser(weex.config.bundleUrl)
    this.id = params.id
    Deferred.when(this.loadData()).done(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {
      return api.page.orderPay.data({id: this.id}).done(rs => {
        let data = rs.data
        this.content = data.content
        this.totalFee = data.totalFee
        this.statusTitle = data.statusTitle
        this.canPay = data.canPay
      })
    },
    goAliPay () {
      if (!this.loaded) {
        return
      }
      api.order.appAlipay({id: this.id}).done(rs => {
        let data = rs.data
        if (weex.isRegisteredModule('alipay')) {
          let alipay = weex.requireModule('alipay')
          alipay.pay({
            orderInfo: data.orderInfo
          }, rs => {
            let status = rs.resultStatus
            if (status === '9000') {
              // 支付成功
              modal.toast({message: '恭喜您，支付成功'})
              navigator.pop()
            } else if (status === '8000') {
              modal.alert({message: '正在处理中，请稍后查看'}, () => {
                navigator.pop()
              })
            } else if (status === '5000') {
              modal.alert({message: '重复请求'}, () => {
                navigator.pop()
              })
            } else {
              modal.toast({message: '支付失败'})
            }
          })
        }
      })
    }
  }
}
</script>
